<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 父组件可以在引用子组件的时候，通过属性绑定的形式(v-bind)，
            把需要传递给子组件的数据，以属性绑定的形式传递给子组件 -->
        <com1 :parentmsg="msg"></com1>
    </div>

    <script>

       

        var vm = new Vue({
            el: '#app',
            data: {
                msg: '123 啊-父组件中的数据'
            },
            methods: {
                
            },
            components:{
                com1: {
                    data: function(){
                        // 注意： 子组件中的data数据，不是通过父组件传递的，而是子组件私有的
                        // 比如：子组件通过ajax传过来的数据，就可以放到data中
                        return {
                            title: '123',
                            content:'qqq'
                        }
                    },
                    props: [
                        // 把父组件传递过来的 parentmsg 属性，在 props数组中定义
                        // 这样就可以使用到父组件传过来的值
                        // props里的数据是不可写的，只能读
                        'parentmsg'
                    ],
                    // 默认是无法访问父组件的数据
                    template: `<h1>这是子组件...{{ parentmsg }}</h1>`,
                    methods: {
                        
                    }
                }
            }
        });
    </script>
</body>
</html>